html
  .avatar-edit-page
    height 100%
    max-width 480PX
    margin 0 auto

$animateDuration = 0.35s

.avatar-edit-page
  position relative
  background #FF91B5
  overflow hidden
  height 100vh
  &.menu-open
    .page-container
      transform translate(220px, 0) scale(0.75)
      // box-shadow 0 0 0 3px rgba(0, 0, 0, 0.05)
      border-radius 40px

  
.page-container
  position relative
  background #fff url(https://image-hosting.xiaoxili.com/img/img/20200916/cdf936658f762d15b501003249242afa-123d6b.png) center top no-repeat
  background-size 100% auto
  // background linear-gradient(#1f55ff, #dae6f5, #fff, #fff)
  height 100%
  overflow hidden
  box-sizing border-box
  display flex
  flex-direction column
  justify-content space-between
  border-radius 0
  transition $animateDuration cubic-bezier(.75,.26,.02,1.01) transform, $animateDuration cubic-bezier(0.68, -0.55, 0.265, 1.55) border-radius

.page-container-shape
  background-image url(https://image-hosting.xiaoxili.com/img/img/20200910/14722987e702e132dc1fed3ac4de74fe-973476.jpg)

  // @media (max-height: 680px)
  //   background-position center -24px 

.menu-toggle
  position absolute
  left 5px
  top 0
  width 50px
  height 44px
  background url(https://image-hosting.xiaoxili.com/img/img/20200831/52a688d849e4ac26556ab68a9b896f8f-3cb906.svg) center no-repeat

.page-title
  padding-left 3px
  font-size 16px
  font-weight 400
  color #2f3742
  line-height 44px
  height 44px

.page-title-icon
  display inline-block
  width 44px
  height 44px
  vertical-align middle
  margin -3px 10px 0 0 

.canvas-shape
  position absolute
  left 0
  top -9999px
  width 600px
  height 600px

.main-wrap
  display flex
  flex-direction column
  justify-content space-between
  flex 1
  overflow hidden

.page-cover-wrap
  margin 103px auto 0
  // height calc(100% - 133px)
  display flex
  flex-direction column
  justify-content center
  align-items center
.page-theme-cover
  width 300px
  height 370px
  
.page-theme-name
  margin-top 10px
  font-size 20px
  line-height 1.4
  color #333
.page-theme-slug
  margin-top 5px
  font-size 14px
  line-height 1.4
  color #666

.tabs-bottom
  transition 0.3s linear
  transform translateY(100%)
  &.tabs-open
    transform translateY(0)

